<template>
  <div class="go-border-box"  :style="`box-shadow: inset 0 0 25px 3px ${state.option.colors[0]}`">
    <svg :width="w" :height="w">
      <polygon :fill="state.option.backgroundColor" :points="`
        4, 0 ${w - 4}, 0 ${w}, 4 ${w}, ${h - 4} ${w - 4}, ${h}
        4, ${h} 0, ${h - 4} 0, 4
      `"/>
    </svg>

    <svg
        :width="w"
        :height="h"
        :key="item"
        v-for="item in border"
        :class="`border-item ${item}`"
    >
      <polygon
          :fill="state.option.colors[1]"
          points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
      />
    </svg>
  </div>
</template>

<script setup lang="ts">
import {computed, defineProps, onMounted, reactive, watch} from 'vue'
import {copyDefinedProperties} from "../../../utils/copy.ts";
defineOptions({
  name: 'Broder1',
})
const props = defineProps(['option']);
const state = reactive({
  option:{
    height:10,
    width:20,
    left:10,
    top:10,
    colors:["#1D48C4FF","#D3E1F8FF"],
    backgroundColor:"#00000000"
  },
  window:{
    height:1700,
    width:800,
  },
})
onMounted(()=>{
  setting()

})
const border = ['left-top', 'right-top', 'left-bottom', 'right-bottom']
const left=computed(()=>`${(state.option.left/100)*state.window.width}px`)
const top=computed(()=>`${(state.option.top/100)*state.window.height}px`)
const height=computed(()=>`${(state.option.height/100)*state.window.height}px`)
const width=computed(()=>`${(state.option.width/100)*state.window.width}px`)
const h=computed(()=>`${(state.option.height/100)*state.window.height}`)
const w=computed(()=>`${(state.option.width/100)*state.window.width}`)
function setting(){
  if(props.option!==undefined){
    // console.log(props.option)
    copyDefinedProperties(props.option,state.option)
  }
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
}
watch(()=>props.option,(newValue,oldValue)=>{
  // console.log('workOrder变化了',newValue,oldValue)
  setting()
},{immediate:true,deep:true})
window.addEventListener('resize',()=>{
  // console.log("width,height",document.body.clientWidth,document.body.clientHeight)
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
})

</script>

<style scoped>
.go-border-box{
  position: absolute;
  left:v-bind(left);
  top:v-bind(top);
  width: v-bind(width);
  height: v-bind(height);
  border-radius: 15px;
  .border-item {
    position: absolute;
    top: 0;
    left: 0;
  }
  .right-top {
    right: 0;
    transform: rotateY(180deg);
  }
  .left-bottom {
    bottom: 0;
    transform: rotateX(180deg);
  }
  .right-bottom {
    right: 0;
    bottom: 0;
    transform: rotateX(180deg) rotateY(180deg);
  }
}
</style>
